<template>
	<view class="index">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="info.title"></nav-bars>
		<view class="s_detail" v-if="info">
			<view class="s_title">
				{{info.name}}
			</view>
			<!-- <view class="">
				<text>{{info.tag}}</text>
			</view> -->
			<!-- <view class="c_tit">
				<text>作者:{{info.author}}</text>
				<text style="float: right;">阅读:{{info.pv}}</text>
			</view> -->
			<!-- 音频 -->
			<!-- <view class="playvideo" v-if="info.category_id==1">
				<video style="width: 100%;height: 100rpx;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video>
			</view> -->
			<!-- 视频 -->
			<view class="playvideo" v-if="info.category_id == 2">
				<video style="width: 100%;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video>
			</view>
			<view>
				<u-parse :html="info.content"></u-parse>
			</view>
			<view class="c_tits">
				<text>发布时间:{{$common.timestampDate(info.start_at)}}</text>
			</view>
			<!-- <view class="img-km">
				<image src="https://cos.ryz1620.com/liankun/static/df1.gif" mode="widthFix"></image>
			</view> -->
		</view>
		
		<!-- <view class="list" v-for="(items,indexs) in infolist" :key="indexs" v-if="items.id != 1">
			<view class="i_cont" @click="gitdetail(items.id)">
				<view class="i_img"><image :src="items.cover"></image></view>
				<view class="i_bOper">
					<view class="i_tit">{{items.title}}</view>
					<view class="i_tits">{{items.brief}}</view>
					<view class="i_time">{{items.ctime}} <text>阅读:{{items.pv}}</text></view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_now from '@/service/now.js'
import service_mall from '@/service/mall.js'
import activity from '@/service/activity.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
		  id:'',
		  info:{},
		  infolist:[],
		  userId: '',
		  popShare: false, // 弹窗-分享
		  // 评论
		  // 评论
		  comment: '',
		  replyId: null,
		  content: '',
		  useid: '',
		  commentIsReply: false,
		  commentLoading: false,
		  commentReplyId: '',
		  commentReplyName: '',
		  is_show_model: false, //是否显示分享模态窗
		  commentFocus:false,
		  type:1,//家装秘籍
		}
	},
	onLoad(params) {
		this.$utils.getUrl()
		let scene = decodeURIComponent(params.scene);
		let token = uni.getStorageSync('token')
		scene = scene.split("&");
		let obj = {}
		for (let i = 0; i < scene.length; i++) {
			let newscene = scene[i].split("=");
			obj[newscene[0]] = newscene[1];
		}
		this.getDateils(params.id)
		if (obj.id) {
			this.id = obj.id
			//this.getdata(obj.id)
		
		}else {
			this.id = params.id
		}
		if (obj.share_uid) {
			let shareuId = obj.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		this.userId = uni.getStorageSync('userId')
		if(params.share_uid){
			let shareuId= params.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		this.type=params.type;
	},
	onShareAppMessage(res) {
		// let that = this
		if (res.from === 'button') {}
		this.getgetforwards()
		return {
			title: this.info.title,
			path: '/pages_now/pages/now/article/detail?id=' + this.id + '&share_uid=' + this.userId,
			success: function(res) {
				// that.getgetforwards()
			}
		}
	},
	methods: {
		// 获取详情
		getDateils(id) {
			let data = {
				item_id:id
			};
			
			activity.activityBaseInfo(data)
			.then(res => {
				if (res.code == 1 || res.data!='') {
					this.info = res.data;
					this.getpv();
				}
			})
		},
		
		gitdetail(id){
			uni.navigateTo({
				url:'/pages_now/pages/now/article/detail?id=' + id
			})
		},
		// 阅读记录
		getpv() {
			let params = {
				article_id: this.id
			}
			service_now.getpv(params)
			.then(res => {
				if (res.code == 1) {
					
				}
			})
		},
		// 转发
		getgetforwards() {
			service_now.getforward({
					article_id: this.id
				})
				.then(res => {})
		},
		// 关闭弹窗
		popShareClose() {
			this.popShare = false
		},
		// 跳转-海报页面
		popShareToPicture() {
			uni.navigateTo({
				url: '/pages_now/pages/now/article/share?id=' + this.id
			})
		},
		// 点赞
		trendStore(item) {
			let status = item.support_status
			if (status == 1) {
				uni.showModal({
					title: '提示',
					content: '确认取消点赞?',
					success: (res) => {
						if (res.confirm) {
							service_now.supportDemo({
									article_id: this.id,
									status: 0
								})
								.then(res => {
									if (res.code == 1) {
										this.info.support_status = 0
										this.info.support_num--
									} else {
										this.$utils.showErr({
											title: res.msg
										})
									}
								})
						} else if (res.cancel) {
							return
						}
					}
				});
			} else {
				service_now.supportDemo({
						article_id: this.id,
						status: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.info.support_status = 1
							this.info.support_num++
						} else {
							this.$utils.showErr({
								title: res.msg
							})
						}
					})
		
			}
		
		},
	
	}
}
</script>

<style lang="scss" scoped>
.index{
	width: 100vw;min-height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.articelist{
	padding:0 30rpx;
	border-bottom:15rpx #f5f5f5 solid;
}
.tabtop{
	line-height: 90rpx;
	font-size: 32rpx;
	.i_more{
		font-size: 28rpx;
		float: right;
		color: #999;
	}
}
.i_cont{
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top:20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit{
		font-size:30rpx;
		height: 80rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
	}
	.i_tits{
		font-size:26rpx;
		height: 68rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
		  color: #999;
	}
	.i_time{
		font-size:26rpx;
		color: #999;
	}
}
.s_detail{
	padding: 20rpx;
}
.c_tits{
	font-size: 28rpx;
	color: #999;
	line-height: 80rpx;
}
.s_title{
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.c_tit{
	line-height: 80rpx;
	border-bottom: 1px #f1f1f1 solid;
	margin-bottom: 30rpx;
	color: #888;
}
.list{
	padding:0 30rpx;
}
.i_cont{
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top:20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit{
		font-size:30rpx;
		height: 80rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
	}
	.i_tits{
		font-size:26rpx;
		height: 68rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
		  color: #999;
	}
	.i_time{
		font-size:26rpx;
		color: #999;
		text{
			float: right;
		}
	}
}
.img-km{
	margin:30rpx 0;
}
.topsx{
	padding:20rpx;
	font-size:32rpx;
	font-weight:bold;
}
// 评论=====
		.d_evaluate {
			padding: 40rpx 0;
			background: #fff;

			.d_eTitle {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 36rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 8rpx;
				}
			}

			.d_eList {
				padding-left: 32rpx;
			}

			.d_eItem {
				margin-top: 30rpx;

				&:nth-last-child(1) .p_eCont::after {
					content: none;
				}
			}

			.d_eHead,
			.d_eIts .d_eiHead {
				width: 66rpx;
				height: 66rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
			}

			.d_eCont {
				padding-bottom: 28rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(.5);
				}
			}

			.d_eName,
			.d_eIts .d_eiName {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
			}

			.d_eAuth,
			.d_eIts .d_eiAuth {
				width: 64rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				margin-left: 8rpx;
				border-radius: 28rpx;
				background: #f6f7fb;
				display: inline-block;
			}

			.d_eTxt,
			.d_eIts .d_eiTxt {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				padding-right: 32rpx;
				margin-top: 4rpx;
			}

			.d_eTip,
			.d_eIts .d_eiTip {
				color: #939393;
				font-size: 20rpx;
				padding-left: 16rpx;
				display: inline-block;
			}

			// 他人回复
			.d_eiItem {
				margin-top: 16rpx;
			}

			.d_eiCont {
				overflow: hidden;
			}

			.d_eiReply {
				color: #939393;
				font-size: 20rpx;
				padding: 0 4rpx;
			}
		}

		// 评论框=====
		.d_talk {
			.d_tShim {
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.d_tBox {
				width: 100vw;
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 101;
				box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);
			}

			.d_tFuns {
				padding-left: 30rpx;
				float: right;
			}

			.d_tFun {
				width: 110rpx;
				height: 96rpx;
				float: right;
			}

			.d_tIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin: 0 auto;
				padding-top: 14rpx;
				box-sizing: content-box;
			}

			.d_tTxt {
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #939393;
				font-size: 20rpx;
			}

			.d_tInput {
				height: 60rpx;
				margin: 20rpx 0 0 32rpx;
				border-radius: 60rpx;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 28rpx;
					background: #f6f7fb;
				}
			}
		}
.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		top: 0;
		display: none;
		width: 100%;
		z-index: 500;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		background: #fff;
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 90rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.md-content-item .s_bIcon {
		font-size: 72rpx;
	}

	.s_bIcon {
		width: 112rpx;
		height: 112rpx;
		color: #fff;
		font-size: 140rpx;
		margin: 60rpx auto 0;
		border-radius: 50%;
		background: #8bc37a;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_bIcons {
		background: #ffd425;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}		
</style>